<!-- *Author: 黄旗, *Date: 2020-08-04 15:45:59 -->
<template>
    <Modal :width="1080" :styles="{top: '50px'}" v-model='modal' :mask-closable='false' @on-cancel='canceledit(modalname)' >
        <h3 slot="header">站点配置 - {{modalparams.domain}}</h3>
        <Form :label-width='130' :ref='modalname' :model='modalparams' class="setmodal">
            <Row type="flex" :gutter="36" justify="space-between">
                <Col span="12">
                    <h3 class="ivu-form-item-label ivu-mb-8" style="width:115px;float:none">https证书绑定</h3>
                    <template v-if="ssl_edit">
                        <FormItem label='.key文件：'>
                            <p>{{ssl_keyname}}</p>
                        </FormItem>
                        <FormItem label='.pem文件：'>
                            <p>{{ssl_pemname}}</p>
                        </FormItem>
                        <FormItem label='证书生成日期：'>
                            <span>{{ssl_time}}</span> <Button type='primary' class="ivu-ml-16" @click="ssl_edit=!ssl_edit">修改</Button>
                        </FormItem>
                    </template>
                    <template v-else>
                        <FormItem label='.key文件：'>
                            <Upload action="/" accept=".key" :before-upload="handleUploadkey">
                                <Button>上传文件</Button>
                                <span class="ivu-ml-16">{{modalparams.ssl_key.name}}</span>
                            </Upload>
                        </FormItem>
                        <FormItem label='.pem文件：'>
                            <Upload action="/" accept=".pem" :before-upload="handleUploadpem">
                                <Button>上传文件</Button> <span class="ivu-ml-16">{{modalparams.ssl_pem.name}}</span>
                            </Upload>
                            <p><font class="red">注：上传的文件格式.key和.pem，绝对不能错，否则会导致服务器nginx直接无法启动报错</font></p>
                        </FormItem>
                        <FormItem label='证书生成日期：'>
                            <DatePicker clearable v-width='360' v-model="modalparams.ssl_time" format="yyyy-MM-dd" type="date" placeholder="请选择证书生成日期"></DatePicker>
                        </FormItem>
                    </template>
                    <Divider />

                    <h3 class="ivu-form-item-label ivu-mb-8" style="width:115px;float:none">专题栏目绑定</h3>
                    <FormItem label='绑定专题：'>
                        <span>{{modalparams.zt_dir==0?'':modalparams.zt_dir}}</span>
                        <Button class="ivu-ml-16" type='primary'  @click='ztdir=true'>绑定专题</Button>
                        <Modal title="绑定专题" v-model='ztdir' :width="800" :mask-closable='false' footer-hide>
                            <div style="max-height:500px;overflow:auto">
                                <RadioGroup v-model="modalparams.zt_dir" @on-change="ztdir=false">
                                    <Radio label="0">取消绑定</Radio>
                                    <Radio :label="item" v-for="(item, index) of zt_dir_list" :key="index"></Radio>
                                </RadioGroup>
                            </div>
                        </Modal>
                        <!-- <RadioGroup v-model="modalparams.zt_dir">
                            <Radio label="0">取消绑定</Radio>
                            <Radio :label="item" v-for="(item, index) of zt_dir_list" :key="index"></Radio>
                        </RadioGroup> -->
                    </FormItem>
                    <p class="ivu-form-item-label ivu-mb-8" style="width:130px;float:none">绑定二级栏目：</p>
                    <FormItem label='域名：'>
                        <Select v-width='360' v-model="modalparams.zt_other_domain" filterable placeholder='请搜索选择域名'>
                            <Option v-for="item in domainlist" :value="item.domain" :key="item.domain">{{ item.domain }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label='栏目：'>
                        <Input clearable v-width='360' v-model='modalparams.zt_other_dir' placeholder='请输入栏目名称' />
                    </FormItem>
                </Col>
                <Col span="12">
                    <h3 class="ivu-form-item-label ivu-mb-8" style="width:115px;float:none">301配置</h3>
                    <FormItem label='301跳转：'>
                        <Input clearable v-width='360' v-model='modalparams.redirect_301' placeholder='请输入301跳转地址' />
                        <p v-if="modalparams.redirect_301"><font class="red" style="line-break: anywhere;">注：配置后本地预览若无效，请清空浏览器缓存或新开浏览器无痕模式测试</font></p>
                    </FormItem>
                    <Divider />

                    <h3 class="ivu-form-item-label ivu-mb-8" style="width:115px;float:none">优化配置</h3>
                    <FormItem label='快速收录token：'>
                        <Input clearable v-width='360' v-model='modalparams.yh_fast_token' placeholder='请输入百度的token' />
                    </FormItem>
                    <FormItem label='普通收录token：'>
                        <Input clearable v-width='360' v-model='modalparams.yh_general_token' placeholder='请输入百度的token' />
                    </FormItem>
                    <Divider />

                    <h3 class="ivu-form-item-label ivu-mb-8" style="width:115px;float:none">遮罩配置</h3>
                    <FormItem label='遮罩跳转：'>
                        <Input clearable v-width='360' v-model='modalparams.zz_url' placeholder='请输入遮罩跳转' />
                        <p><font class="red" style="line-break: anywhere;">注：支持格式：/zt/youhuanewyiyuan/(路径) 或 http://3g.120yy120.com/zt/youhuanewyiyuan/(域名必须加协议头)</font></p>
                    </FormItem>
                </Col>
            </Row>
        </Form>
        <div slot='footer'>
            <Button @click='canceledit(modalname)'>取消</Button>
            <Button type='primary' :loading="subloading" @click='submitedit(modalname)'>确定</Button>
        </div>
    </Modal>
</template>

<script>
    import { siteindexinfo, siteindexeditconfig } from '@api/httpsetting'
    export default {
        name: '',
        components: {},

        data () {
            return {
                modalname: 'modalname',
                modal: false,
                subloading: false,
                ztdir: false,
                zt_dir_list: [],
                domainlist: [],
                ssl_keyname: '',
                ssl_pemname: '',
                ssl_time: '',
                ssl_edit: false,
                modalparams: {
                    id: '',
                    domain: '',
                    // https证书绑定
                    ssl_key: '',
                    ssl_pem: '',
                    ssl_time: '',
                    // 绑定301
                    redirect_301: '',
                    // 遮罩配置
                    zz_url: '',
                    // 优化配置
                    yh_fast_token: '',
                    yh_general_token: '',
                    // 绑定专题
                    zt_dir: '',
                    zt_other_domain: '',
                    zt_other_dir: ''
                }
            };
        },
        /* 函数方法集合 */
        methods: {
            /* @函数功能: 初始化 */
            initial (row) {
                this.ztdir = false
                this.modalparams = {
                    id: row.id,
                    domain: '',
                    // https证书绑定
                    ssl_key: '',
                    ssl_pem: '',
                    ssl_time: '',
                    // 绑定301
                    redirect_301: '',
                    // 遮罩配置
                    zz_url: '',
                    // 优化配置
                    yh_fast_token: '',
                    yh_general_token: '',
                    // 绑定专题
                    zt_dir: '',
                    zt_other_domain: '',
                    zt_other_dir: ''
                }
                this.askData(row)
            },
            askData (row) {
                siteindexinfo({ id: row.id }).then(res => {
                    this.domainlist = res.condition.db_list
                    this.zt_dir_list = res.condition.zt_dir_list
                    this.modalparams.domain = res.domain
                    // https证书绑定
                    // this.modalparams.ssl_time = res.ssl_time

                    this.ssl_keyname = res.ssl_key
                    this.ssl_pemname = res.ssl_pem
                    this.ssl_time = res.ssl_time
                    this.ssl_edit = !!res.ssl_time
                    // 绑定301
                    this.modalparams.redirect_301 = res.redirect_301
                    // 遮罩配置
                    this.modalparams.zz_url = res.zz_url
                    // 优化配置
                    this.modalparams.yh_fast_token = res.yh_fast_token
                    this.modalparams.yh_general_token = res.yh_general_token
                    // 绑定专题
                    this.modalparams.zt_dir = res.zt_dir
                    this.modalparams.zt_other_domain = res.zt_other_domain
                    this.modalparams.zt_other_dir = res.zt_other_dir

                    this.modal = true
                })
            }, // 请求数据处理
            canceledit () {
                this.modal = false
            },
            //  上传数据处理
            submitedit () {
                let FormDatas = new FormData()
                FormDatas.append('id', this.modalparams.id)
                FormDatas.append('domain', this.modalparams.domain)
                // https证书绑定
                FormDatas.append('ssl_key', this.modalparams.ssl_key)
                FormDatas.append('ssl_pem', this.modalparams.ssl_pem)
                FormDatas.append('ssl_time', this.modalparams.ssl_time ? this.$Date(this.modalparams.ssl_time).format('YYYY-MM-DD') : '')
                // 绑定301
                FormDatas.append('redirect_301', this.modalparams.redirect_301)
                // 遮罩配置
                FormDatas.append('zz_url', this.modalparams.zz_url)
                // 优化配置
                FormDatas.append('yh_fast_token', this.modalparams.yh_fast_token)
                FormDatas.append('yh_general_token', this.modalparams.yh_general_token)
                // 绑定专题
                FormDatas.append('zt_other_dir', this.modalparams.zt_other_dir)
                FormDatas.append('zt_other_domain', this.modalparams.zt_other_domain)
                if (+this.modalparams.zt_dir === 0) FormDatas.append('zt_dir', '')
                else FormDatas.append('zt_dir', this.modalparams.zt_dir)
                this.subloading = true
                siteindexeditconfig(FormDatas).then(() => {
                    this.$Message.success('配置成功')
                    this.$emit('askData')
                    this.modal = false
                    this.subloading = false
                }).catch(() => {
                    this.subloading = false
                })
            },
            handleUploadkey (file) {
                this.modalparams.ssl_key = file;
                return false;
            },
            handleUploadpem (file) {
                this.modalparams.ssl_pem = file;
                return false;
            }
        }
    }
</script>
<style scope>
.setmodal{
.ivu-form-item{
    margin-bottom: 16px
}}
</style>
